'use strict';

var dialog = {
    containerClass: 'postbird-box-container active',
    box: null, // 用于标识增加的div
    textTemplate: {
        title: '提示信息',
        content: '提示内容',
        okBtn: '好的',
        cancelBtn: '取消',
        contentColor: '#666666',
        okBtnColor: '#0e90d2',
        class:'class',
        width: '400px',
        footer: 'block',
        promptTitle: '请输入内容',
        promptOkBtn: "确认",
        type: '',
        element:'',
    },
    getAlertTemplate: function getAlertTemplate() {
        var temp = '<div class="postbird-box-dialog">' + '<div class="postbird-box-content">' + '<div class="postbird-box-header">' + '<span class="postbird-box-close-btn">×</span>' + '<span class="postbird-box-title">' + '<span >' + this.textTemplate.title + '</span>' + '</span>' + '</div>' + '<div class="postbird-box-text">' + '<div style="color:' + this.textTemplate.contentColor + ';">' + this.textTemplate.content + '</div>' + '</div>' + '<div class="postbird-box-footer">' + '<button class="btn-footer btn-block-footer btn-footer-ok" style="color:' + this.textTemplate.okBtnColor + ';">' + this.textTemplate.okBtn + '</button>' + '</div>' + '</div>' + '</div>';
        return temp;
    },
    getConfirmTemplate: function getConfirmTemplate() {
        return '<div class="postbird-box-container '+this.textTemplate.class+'">' + '<div class="postbird-box-dialog">' + '<div class="postbird-box-content" style="width: ' + this.textTemplate.width + '">' + '<div class="postbird-box-header">' + '<span class="postbird-box-close-btn"><i class="close-btn">×</i></span>' + '<span class="postbird-box-title">' + '<span >' + this.textTemplate.title + '</span>' + '</span>' + '</div>' + '<div class="postbird-box-text">' + '<div style="color:' + this.textTemplate.contentColor + ';">' + this.textTemplate.content + '</div>' + '</div>' + '<div class="postbird-box-footer" style="display:' + this.textTemplate.footer + '">' + '<button class="btn-footer btn-left-footer btn-footer-ok">' + this.textTemplate.okBtn + '</button>' + '<button class="btn-footer btn-right-footer btn-footer-cancel">' + this.textTemplate.cancelBtn + '</button>' + '</div>' + '</div>' + '</div>' + '</div>';
    },
    getPromptTemplate: function getPromptTemplate() {
        return '<div class="postbird-box-container">' + '<div class="postbird-box-dialog">' + '<div class="postbird-box-content">' + '<div class="postbird-box-header">' + '<span class="postbird-box-close-btn">×</span>' + '<span class="postbird-box-title">' + '<span >' + this.textTemplate.title + '</span>' + '</span>' + '</div>' + '<div class="postbird-box-text">' + '<input type="text" class="postbird-prompt-input" autofocus="true" >' + '</div>' + '<div class="postbird-box-footer">' + '<button class="btn-footer btn-left-footer btn-footer-cancel" style="color:' + this.textTemplate.cancelBtnColor + ';">' + this.textTemplate.cancelBtn + '</button>' + '<button class="btn-footer btn-right-footer btn-footer-ok"  style="color:' + this.textTemplate.okBtnColor + ';">' + this.textTemplate.okBtn + '</button>' + '</div>' + '</div>' + '</div>' + '</div>';
    },
    getTipsTemplate: function getTipsTemplate(fontI) {
        var temp = '<div class="am-tips">' + '<div class="am-view-notice">' + '<div class="am-view-notice-content">' + '<i class="' + fontI[this.textTemplate.type] + '"><i>' + '<span>' + this.textTemplate.content + '</div></span>' + '</div>' + '</div>' + '</div>';
        return temp;
    },
    getReplyTipsTemlate:function getReplyTipsTemlate(){
         var temp ='<div class="reply-tips-template am-tips-reply"><div class="am-view-notice"><div class="am-view-notice-content">' + this.textTemplate.content + '</div></div></div>';
          return temp;
    },
    alert: function alert(opt) {
        this.textTemplate.title = opt.title || this.textTemplate.title;
        this.textTemplate.content = opt.content || this.textTemplate.content;
        this.textTemplate.okBtn = opt.okBtn || this.textTemplate.okBtn;
        this.textTemplate.okBtnColor = opt.okBtnColor || this.textTemplate.okBtnColor;
        this.textTemplate.contentColor = opt.contentColor || this.textTemplate.contentColor;
        var box = document.createElement("div"),
            _this = this;
        box.className = this.containerClass;
        box.innerHTML = this.getAlertTemplate();
        this.box = box;
        document.body.appendChild(this.box);
        var btn = document.getElementsByClassName('btn-footer-ok');
        btn[btn.length - 1].focus();
        btn[btn.length - 1].onclick = function () {
            if (opt.onConfirm) {
                opt.onConfirm();
            }
            _this.removeBox();
        };
    },
    confirm: function confirm(opt) {
        this.textTemplate.title = opt.title || this.textTemplate.promptTitle;
        this.textTemplate.class = opt.class || this.textTemplate.class;
        this.textTemplate.promptPlaceholder = opt.promptPlaceholder || this.textTemplate.promptPlaceholder;
        this.textTemplate.okBtn = opt.okBtn || this.textTemplate.promptOkBtn;
        this.textTemplate.okBtnColor = opt.okBtnColor || this.textTemplate.okBtnColor;
        this.textTemplate.cancelBtn = opt.cancelBtn || this.textTemplate.cancelBtn;
        this.textTemplate.cancelBtnColor = opt.cancelBtnColor || this.textTemplate.cancelBtnColor;
        this.textTemplate.content = opt.content || this.textTemplate.content;
        this.textTemplate.width = opt.width || this.textTemplate.width;
        this.textTemplate.footer = opt.footer || this.textTemplate.footer;
        var box = document.createElement("div"),
            _this = this;
        this.box = box;
        box.className = this.containerClass;
        box.innerHTML = this.getConfirmTemplate();
        document.body.appendChild(box);
        var okBtn = document.getElementsByClassName('btn-footer-ok');
        okBtn[okBtn.length - 1].focus();
        okBtn[okBtn.length - 1].onclick = function () {
            if (opt.onConfirm) {
                opt.onConfirm(_this);
            }
        };
        var cancelBtn = document.getElementsByClassName('btn-footer-cancel');
        cancelBtn[cancelBtn.length - 1].onclick = function () {
            if (opt.onCancel) {
                opt.onCancel();
            }
            _this.removeBox();
        };
        var closeBtn = document.getElementsByClassName('close-btn');
        closeBtn[0].onclick = function () {
            _this.removeBox();
        };
    },
    prompt: function prompt(opt) {
        this.textTemplate.title = opt.title || this.textTemplate.title;
        this.textTemplate.content = opt.content || this.textTemplate.content;
        this.textTemplate.contentColor = opt.contentColor || this.textTemplate.contentColor;
        this.textTemplate.okBtn = opt.okBtn || this.textTemplate.okBtn;
        this.textTemplate.okBtnColor = opt.okBtnColor || this.textTemplate.okBtnColor;
        this.textTemplate.cancelBtn = opt.cancelBtn || this.textTemplate.cancelBtn;
        this.textTemplate.cancelBtnColor = opt.cancelBtnColor || this.textTemplate.cancelBtnColor;
        var box = document.createElement("div"),
            _this = this;
        box.className = this.containerClass;
        box.innerHTML = this.getPromptTemplate();
        this.box = box;
        document.body.appendChild(box);
        var promptInput = document.getElementsByClassName('postbird-prompt-input');
        promptInput = promptInput[promptInput.length - 1];
        promptInput.focus();
        var okBtn = document.getElementsByClassName('btn-footer-ok');
        var inputData = promptInput.value;;
        okBtn[okBtn.length - 1].onclick = function () {
            if (opt.onConfirm) {
                opt.onConfirm(promptInput.value);
            }
            _this.removeBox();
        };
        var cancelBtn = document.getElementsByClassName('btn-footer-cancel');
        cancelBtn[cancelBtn.length - 1].onclick = function () {
            if (opt.onCancel) {
                opt.onCancel(promptInput.value);
            }
            _this.removeBox();
        };
    },
    tips: function tips(opt) {
        var fontI = {
            'warning': 'am-icon-btn am-warning am-icon-warning',
            'success': 'am-icon-btn am-success am-icon-check',
            'info': 'am-icon-btn am-primary am-icon-exclamation',
            'error': 'am-icon-btn am-danger am-icon-times'
        };
        this.textTemplate.title = opt.title || this.textTemplate.title;
        this.textTemplate.content = opt.content || this.textTemplate.content;
        this.textTemplate.contentColor = opt.contentColor || this.textTemplate.contentColor;
        this.textTemplate.type = opt.type || this.textTemplate.type;
        var htmls_el = this.getTipsTemplate(fontI);
        $(htmls_el).appendTo('body');
       $('.am-tips').slideDown();
        setTimeout(function () {
           $('.am-tips').slideUp();
           setTimeout(function () {
                $('.am-tips').remove();
            }, 1000);
        }, 2000);
    },

    /**
     * 依赖某个参数进行动画展示效果
     * @param opt
     */
    replyTips:function replyTips(opt){
        this.textTemplate.title = opt.title || this.textTemplate.title;
        this.textTemplate.content = opt.content || this.textTemplate.content;
        this.textTemplate.element =opt.element||this.textTemplate.element;
        var targetWidth =  this.textTemplate.element.clientWidth+40,
            targetHeight =  this.textTemplate.element.clientHeight+40;
        var body = document.body, doc = document.documentElement;
        var offsetTop = this.textTemplate.element.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop)-20,
            offsetLeft = this.textTemplate.element.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft)-30;
        var htmls_el = this.getReplyTipsTemlate();
        $(htmls_el).appendTo(body);
        $('.am-tips-reply').css('margin-top',offsetTop+'px');
        $('.am-tips-reply').css('left',offsetLeft+'px');
        setTimeout(function () {
            $('.am-tips-reply').fadeTo("1000",0);
            setTimeout(function () {
                $('.am-tips-reply').remove();
            }, 1000);
        }, 2000);
    },
    colse: function colse() {
        this.removeBox();
    },
    removeBox: function removeBox() {
        var box = document.getElementsByClassName(this.containerClass);
        document.body.removeChild(box[box.length - 1]);
    }
};